<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label="账户余额" label-width="200">
				<text>{{balance}}</text>
			</u-form-item>
			<u-form-item label="账户类型" label-width="200" prop="type">
				<u-input type="select" :select-open="actionSheetShow" v-model="model.accountType" placeholder="请选择提现账户类型" @click="actionSheetShow = true"></u-input>
			</u-form-item>
			<u-form-item label="提现数量" label-width="200" prop="number">
				<u-input type="select" :select-open="txSheetShow" v-model="model.number" @click="txSheetShow = true" placeholder="请选择提现数量"></u-input>
			</u-form-item>
		</u-form>
		<view class="note">
			<text>温馨提示：亲，正常提现到账时间是5-10分钟内到账哦。<br/>高峰期24小时内到账，带来不便，敬请谅解。</text>
		</view>
		<view style="margin-top: 60rpx;">
			<u-button @click="submit" ripple-bg-color="#656565" :plain="false" :ripple="true" type="primary">提交</u-button>
		</view>
		
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-action-sheet :list="txSheetList" v-model="txSheetShow" @click="txSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		let that = this;
		return {
			model: {
				number:"",
				accountType:""
			},
			balance:"",
			txSheetShow:false,
			txSheetList:[
				{
					text: '50',
				},
				{
					text: '100',
				},
				{
					text: '200',
				},
				{
					text: '500',
				},
				{
					text: '1000',
				},
			],
			actionSheetList: [
				{
					text: '银行卡'
				},
				{
					text: '支付宝'
				}
			],
			actionSheetShow:false,
			rules: {
				number: [
					{
						required: true,
						message: '请输入提现数量',
						trigger: ['change','blur'],
					},
					{
						pattern: /^\+?[1-9]\d*$/,
						message: '提现数量必须是大于0的整数',
						trigger: ['change','blur'],
					}
				],
			},
			errorType: ['message'],
		};
	},
	onLoad() {
		this.$request.post("/member/getMember", {
			dataType: 'json',
			responseType: 'text'
		})
		.then(res => {
			this.balance = res.data.json.balance;
		})
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		txSheetCallback(index){
			uni.hideKeyboard();
			this.model.number = this.txSheetList[index].text;
		},
		actionSheetCallback(index) {
			uni.hideKeyboard();
			this.model.accountType = this.actionSheetList[index].text;
		},
		async submit() {
			await this.$refs.uForm.validate(valid => {
				if (valid) {
					if(this.model.accountType==""){
						this.$api.msg("请选择提现账户类型");
						return;
					}
					
					if(!this.model.number || this.model.number==""){
						this.$api.msg("请选择提现金额");
						return;
					}
			
					if(this.balance < this.model.number){
						this.$api.msg("您的余额不足" + this.model.number);
						return;
					}
					uni.showLoading({
						title:"正在提交",
						mask:true
					})
					this.$request.post("/tx/submit", {
						data:{number:this.model.number,accountType:this.model.accountType},
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						uni.hideLoading();
						this.$api.msg("提现成功");
						this.balance = this.balance-this.model.number;
					})
					.catch(error => {
						uni.hideLoading();
					});
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
}

.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
.note{
	font-size: 26rpx;
	padding: 30rpx 0;
	line-height: 50rpx;
}
</style>
